<template>
<!-- 兑奖中心 -->
	<view>
		<u-notice-bar color="#f3912b" type="error" mode="vertical" :list="list" class="f13"></u-notice-bar>
		<view style="background-image: url(/static/images/taketicketCenterBg.png);background-size: 100% 100%;width: 750rpx;height: 100rpx;">
			<!-- <image mode="widthFix" style="width: 750rpx;position: absolute;z-index: -1;" src="/static/images/taketicketCenterBg.png"></image> -->
			<view class="p-4 text-center" style="position: absolute;left: 0;right: 0;z-index: 1;padding-top:10px;">
				<text class="text-white text-lg f12">
					<!-- 欢迎您来到兑奖专区，请输入兑奖信息 -->
					{{i18n.ticket_center.t1}}
				</text>
			</view>
		</view>
		<view class="bg-white p-2" style="border-radius: 2.1333333333vw;width: 100%;margin-top: -7rpx;">
			<view class="d-flex a-center j-sb">
				<view>
					<text class="text-lg  text-black f12">
						<!-- 兑奖码 -->
						{{i18n.ticket_center.t2}}
					</text>
				</view>
				<view class="d-flex a-center">
					<text class="text-md text-light-muted f12">
						<!-- 兑奖说明 -->
						{{i18n.ticket_center.t3}}
					</text>
					<!-- 跳转到兑奖说明页 -->
					<u-icon @click="goToRule()" name="question-circle" color="#fea654" size="28"></u-icon>
				</view>
			</view>
			<view class="mt-2">
				<!-- 请输入或粘贴兑奖码 -->
				<input v-model="ticketNumber" class="font-sm pl-2" style="height: 40px;background: #f5f5f5;border-radius: 2.1333333333vw;" :placeholder="i18n.ticket_center.t4" type="text" value="" />
			</view>
			<view class="py-2" style="border-bottom: 1px solid #f5f5f5;">
				<text class="text-lg text-black f12">
					<!-- 收货地址 -->
					{{i18n.ticket_center.t5}}
				</text>
			</view>
			<view @click="goToUserAddress()" style="border-bottom: 1px solid #f5f5f5;" class="d-flex a-center j-sb p-2">
				<view class="d-flex flex-column j-center">
					<text v-if="defaultAdress" class="text-md text-light-muted word-noover">
						{{defaultAdress.user_name}}  {{defaultAdress.user_tel}}</text>
					<text v-if="defaultAdress" class="text-md text-light-muted word-noover">
						<!-- {{defaultAdress.province_name}} {{defaultAdress.city_name}}  -->
						{{defaultAdress.detail_address}}
					</text>
				</view>
				<view>
					<u-icon name="arrow-right" size="36"></u-icon>
				</view>
			</view>
			<view class="text-center">
				<button
					:disabled="!active"
					style="width: 500rpx;"
					:style="active?'background-color: #f49e1d;color:white':'background-color: #eee;'"
					@click="exchangeLottery()"
					class="cu-btn round  margin-tb-sm lg bg f13">
					<!-- 确认兑奖 -->
					{{i18n.ticket_center.t6}}
				</button>
			</view>	
		</view>
		<view  class="text-center" style="position:absolute;margin-top: 20px;width: 750rpx;">
			<text class="text-lg text-bold text-black">
				<!-- 火热参与 -->
				{{i18n.ticket_center.t7}}
			</text>
		</view>
		<view  style="position:absolute;margin-top: 50px;width: 100%;" class="bg-white">
			<view v-if="willKnowList" class="row">
				<view
					v-for="(item,index) in willKnowList"
					:key="index"
					:title="item.title"
					class="d-flex flex-column  bg-white "
					style="width: 50%;height:auto;border: 1px solid #efefef;"
				>
					<image
						style="width: 325rpx;height:355rpx ; margin: 5px auto;"
						:src="item.good_header"
						mode="widthFix"
						@click="lotteryDetail(item)" lazy-load></image>
					<view class="px-2" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
						<text class="box-content font-sm">
							({{item.good_period}} <text class="f10">{{i18n.common.expect}}</text>){{item.good_name}}
						</text>
					</view>
					<view class="chooseTime0 px-2 py-0" style="width: 320upx;">
						<view class="d-flex box my-1 line-h-md" style="background-color: none;">
							<view class="left">
								<text
									class="font-sm text-light py-1 f10"
									style="border-radius: 0 0 10upx 0;background-color: #E93323; padding: 5px">
									<!-- 100%公平公正 -->
									{{i18n.ticket_center.t8}}
								</text>
							</view>
							<view class="right ">
								<view class="right pl-1 ">
								</view>
							</view>
						</view>
					</view>
					<view class="progress-box px-2 mb">
						<!-- <progress :percent="item.progress" active activeColor="rgb(246, 202, 79)"
							stroke-width="3" backgroundColor="#ebedf0" /> -->
							<!-- <van-progress :show-pivot="showPivot" stroke-width="3" color="rgb(246, 202, 79)"
								:percentage="item.progress==undefined?0:item.progress" /> -->
						
									<progress :percent="item.progress==undefined?0:item.progress" active activeColor="rgb(243, 145, 43)"
										stroke-width="4" :duration="15" backgroundColor="#ebedf0" />		
								
							<!--记录文字区-->
							<view class="d-flex a-center j-sb py-1">
								<view class="side px-1">
									<view class="line-h-sm ">
										<text class="font-sm">
											<!-- 已参与 -->
											{{i18n.ticket_center.t9}}
										</text>
									</view>
									<view class="line-h-sm text-warning">
										<text class="font-sm">
											{{item.now_people}}
										</text>
									</view>
								</view>
								<view class="side px-1">
									<view class="line-h-sm ">
										<text class="font-sm">
											<!-- 剩余 -->
											{{i18n.ticket_center.t10}}
										</text>
									</view>
									<view class="line-h-sm">
										<text class="font-sm">
											{{item.need_people-item.now_people}}
										</text>
									</view>
								</view>
								<view class="side px-1">
									<view class="line-h-sm ">
										<text class="font-sm">
											<!-- 总数量 -->
											{{i18n.ticket_center.t11}}
										</text>
									</view>
									<view class="line-h-sm  text-warning">
										<text class="font-sm">
											{{item.need_people}}
										</text>
									</view>
								</view>
							</view>	
					</view>
					<view class="d-flex a-center j-center">
						<!-- <button class="font-md" "></button> -->
						<view class="px-1 m-1">
							<button
								@click="lotteryDetail(item)"
								style="width: 195rpx;height: 60rpx;background-color: #E93323;"
								class="text-light cu-btn round f12">
								<!-- 立即参与 -->
								{{i18n.ticket_center.t12}}
							</button>
						</view>
						<view @click="addShopCar(item)" class="cu-item px-1" style="font-size: 49upx;"><text
								class="lg text-yellow cuIcon-like b-red"></text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHot,
		addShopCar,
		addressList,
		takeTicket
	} from "@/api/lottery.js";
	import {
		getAddressList,
	} from '@/api/user.js';
	
	import {
		Toast
	} from 'vant';
	
	export default {
		data() {
			return {
				// list: [
				// 	'券晓券是你最温馨的家',
				// 	'券晓券祝你旗开得胜',
				// 	'券晓去欢迎你常回来看看',
				// 	'券晓去尊重每一位客户最大权利'
				// ],
				active:false,
				ticketNumber:'',
				willKnowList:[],
				defaultAdress:{}
			}
		},
		watch:{
			ticketNumber(newVal,old){
				if(newVal!=""){
					this.active=true;
				}else{
					this.active=false;
				}
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			list() {
				return [
					this.i18n.ticket_center.t13, //  '券晓券是你最温馨的家',
					this.i18n.ticket_center.t14, // 	'券晓券祝你旗开得胜',
					this.i18n.ticket_center.t15, // '券晓去欢迎你常回来看看',
					this.i18n.ticket_center.t16, // 	'券晓去尊重每一位客户最大权利'
				] 
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.home_page.title
			});
		},
		onShow() {
			this.getWillKnowList();
			this.getUserDefaultAdress();
		},
		methods:{
			goToRule(){
				uni.navigateTo({
					url:"/pages/lottery/cashPrzceRules/cashPrzceRules"
				})
			},
			onInput(){
				console.log(this.ticketNumber)
			},
			getWillKnowList(){
				let that=this;
				getHot().then(res=>{
					if(res instanceof Array)
					that.willKnowList=res;
				});
			},
			//请求抽奖详情页面
			lotteryDetail(item) {
				console.log(item.id)
				uni.navigateTo({
					url: '/pages/lottery/good_details/good_details?id=' + item.id
				});
			},
			addShopCar(item){
				//添加购物车
				let data={goods_id:item.good_id};
				addShopCar(data).then(res=>{
					if(res){
						// '成功加入心愿单');
						Toast.success(this.i18n.home_page.good_details.t40);
					}else{
						// '加入心愿单失败');
						Toast.fail(this.i18n.home_page.good_details.t41);
					}
				})
			},
			goToUserAddress(){
				uni.navigateTo({
					url:"/pages/users/user_address_list_select/index"
				});
			},
			getUserDefaultAdress(){
				var that=this;
				var addressItem=uni.getStorageSync("SELECT_ADDRESS");
				if(addressItem!=""&&addressItem!=undefined&&addressItem!=null){
					this.defaultAdress=JSON.parse(addressItem);
					return;
				}	
				addressList().then(res => {
					let list = res.list;
					for(var i in list){
						if(list[i].is_default=='y'){
							that.defaultAdress=list[i];
							console.log(that.defaultAdress)
						}
					}
				});	
			},
			/**
			 * 获取地址列表
			 * 
			 */
			getAddressList: function(isPage) {
				let that = this;
				if (isPage) {
					that.loadend = false;
					that.page = 1;
					that.$set(that, 'addressList', []);
				};
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				addressList().then(res => {
					let list = res.list;
					//let loadend = list.length < that.limit;
					that.addressList =res.list;
					that.$set(that, 'addressList', that.addressList);
					that.loadend = true;
					// '我也是有底线的' : '加载更多';
					that.loadTitle = that.loadend ? this.i18n.commom.dixian : this.i18n.commom.loadmore;
					//that.page = that.page + 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = this.i18n.commom.loadmore; // '加载更多';
				});
			},
			//抽奖兑换
			exchangeLottery(){
				if(this.ticketNumber!=""){
					var that=this;
					if(this.defaultAdress!=""&&this.defaultAdress!=undefined&&this.defaultAdress!=null){
					   var caddress=this.defaultAdress.province_name+" "+this.defaultAdress.city_name+this.defaultAdress.detail_address;
					   let data={consignee_name:this.defaultAdress.user_name,consignee_tel:this.defaultAdress.user_tel,consignee_address:caddress,ticketNumber:this.ticketNumber};
					   takeTicket(data).then(res=>{
						   if(res.status=="0"){
							   // 兑换商品成功');
							   Toast.success(this.i18n.ticket_center.t17);
							   that.ticketNumber='';
						   }else{
							   Toast.fail(res.desc);
						   }
					   })
					}
				
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/font.css";
	.word-noover{
		overflow: hidden; //超出隐藏
		text-overflow: ellipsis; //显示省略号
		white-space: nowrap; //强制不换行
	}
</style>
